<template>
    <div class="news-component">
        <!-- 公告列表 -->
        <t-list :split="true" :scroll="{ type: 'virtual', threshold: 5 }">
            <t-list-item
                    v-for="(news, idx) in effectiveNewsList"
                    :key="idx"
            >
                <div class="news-item-content">
                    <!-- 未读/已读标签 -->
                    <!-- 公告标题 -->
                    <span class="news-title">{{ news.title }}</span>
                    <!-- 发布时间（右对齐） -->
                    <span class="news-time">{{ news.publishTime }}</span>
                </div>
            </t-list-item>
        </t-list>
    </div>
</template>
<script setup>
    import { defineProps, computed } from 'vue';
    import {
        List as TList,
        ListItem as TListItem,
        Link as TLink
    } from 'tdesign-vue-next';


    // 接收父组件传递的公告列表（若无则用模拟数据）
    const props = defineProps({
        newsList: {
            type: Array,
            default: () => [],
        },
    });

    // 模拟公告数据（与示例界面匹配）
    const effectiveNewsList = computed(() => {
        return props.newsList.length > 0
            ? props.newsList
            : [
                { title: '关于端午节放假安排的通知', publishTime: '06/03 09:00', isRead: false },
                { title: '关于工位调整的通知', publishTime: '06/05 14:15', isRead: false },
                { title: '2025年消防演练通知', publishTime: '06/06 11:00', isRead: true },
                { title: '关于中秋节放假安排的通知', publishTime: '06/04 10:30', isRead: true },
                { title: '关于考勤打卡的提醒', publishTime: '06/07 08:45', isRead: false },
                { title: '午餐供应时间调整通知', publishTime: '06/08 09:20', isRead: true },
                { title: '关于公司邮箱升级的通知', publishTime: '06/09 16:00', isRead: false },
            ];
    });
</script>
<style scoped>
    .news-component {
        box-sizing: border-box;
        overflow: auto;
    }


    .news-header h3 {
        font-size: 16px;
        font-weight: bold;
        margin: 0;
    }

    /* “更多”链接样式 */
    .more-link {
        font-size: 14px;
        color: #165DFF; /* 示例蓝色，可根据设计调整 */
    }

    /* 列表项内容布局 */
    .news-item-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
    }

    /* 公告标题间距 */
    .news-title {
        flex: 1;
        margin: 0 8px;
    }

</style>
